import { motion, AnimatePresence } from "framer-motion";
import { useEffect } from "react";

interface WorkModalProps {
  selectedWork: {
    company: string;
    position: string;
    period: string;
    description: string;
    details: string[];
  };
  setSelectedWork: (work: any) => void;
}

export const WorkModal = ({ selectedWork, setSelectedWork }: WorkModalProps) => {
  if (!selectedWork) return null;

  useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'auto';
    };
  }, []);

  return (
    <AnimatePresence>
      <div
        className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4"
        onClick={() => setSelectedWork(null)}
      >
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 20 }}
          transition={{ duration: 0.3 }}
          className="bg-white rounded-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto shadow-2xl"
          onClick={e => e.stopPropagation()}
        >
          <div className="p-6">
            <div className="flex justify-between items-start mb-6">
              <div>
                <h3 className="text-2xl font-bold text-gray-800">{selectedWork.company}</h3>
                <div className="flex items-center mt-2 space-x-4">
                  <span className="text-gray-600 bg-gray-100 px-3 py-1 rounded-full text-sm">
                    {selectedWork.position}
                  </span>
                  <span className="text-gray-500 text-sm">{selectedWork.period}</span>
                </div>
              </div>
              <button
                onClick={() => setSelectedWork(null)}
                className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-full"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

          <div className="space-y-6">
            <div>
              <h4 className="text-lg font-semibold text-gray-800 mb-3">工作描述</h4>
              <p className="text-gray-700 leading-relaxed">{selectedWork.description}</p>
            </div>

            <div>
              <h4 className="text-lg font-semibold text-gray-800 mb-3">主要职责</h4>
              <ul className="space-y-3">
                {selectedWork.details?.map((detail, index) => (
                  <li key={index} className="flex items-start">
                    <span className="flex-shrink-0 w-5 h-5 text-green-500 mr-2 mt-0.5">
                      <svg fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                      </svg>
                    </span>
                    <span className="text-gray-700">{detail}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
    </AnimatePresence>
  );
};
